<template>
  <view>
    <view class="fixed bg-f8ff w-100 h-100 top0 left0 ov-hd-y">
      <itemTitle :item="details">
        <template slot="item_title">
          <view
            v-if="details.sku && details.number == 0"
            @click="set_sku"
            class="w168 h64 bg-theme circle20 font500 font25 t-0 f-c-c"
          >
            选规格
          </view>
          <view class="f-b-c" v-else>
            <view
              class="w64 h64 f-c-c"
              @click="set_reduce(details)"
              v-if="details.number"
            >
              <view
                class="w40 h40 font40 font600 rounded-circle f-c-c pb-1"
                :class="details.number <= 0 ? 't-3' : 't-20 bg-theme'"
                >-</view
              >
            </view>
            <view
              class="px-2 h64 font28 font500 t-20 f-c-c"
              v-if="details.number > 0"
              >{{ details.number }}</view
            >
            <view class="w64 h64 f-c-c" @click="set_add(details)">
              <view
                class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme"
                >+</view
              >
            </view>
          </view>
        </template>
      </itemTitle>
      <view>
        <view class="w-100 px-2-6 py-3">
          <view class="w-100 h1 bg-ccc"></view>
        </view>

        <view class="w-100 px-5">
          <view class="font28 font500 t-20 pb-2">商品详情</view>
          <view
            v-if="details.stock"
            style="color: #8a8a8a; font-size: 22rpx; margin-bottom: 20rpx"
            >剩余库存：{{ details.remainStockNum }}</view
          >
          <richText :rich_text="details.content"></richText>
        </view>
      </view>
      <view class="w-100 h340"></view>
    </view>
    <!-- 购物车 -->
    <FoodCar></FoodCar>

    <sku
      :show_sku="show_sku"
      :sku="sku"
      @get_sku="set_food_sku"
      @set_show_sku="show_sku = false"
    ></sku>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import itemTitle from "../ticket/components/title.vue";
import richText from "../ticket/components/rich-text.vue";
import sku from "./components/sku.vue";
import FoodCar from "./components/food_car.vue";
import isLoginMxin from "../../common/isLogin.js";
export default {
  mixins: [isLoginMxin],
  components: {
    itemTitle,
    richText,
    FoodCar,
    sku,
  },
  data() {
    return {
      details: {},
      money: 189,
      number: 1,
      sku: {},
      show_sku: false,
    };
  },
  created() {
    this.details = uni.getStorageSync("food_details");
  },
  methods: {
    ...mapActions("food", ["set_change_food_shop_car"]),
    // 选规格
    set_sku() {
      let data = [
        {
          title: "份量",
          code: 1,
          list: [
            { title: "薏仁粉", id: 1 },
            { title: "两人份", id: 2 },
          ],
        },
        {
          title: "辣度",
          code: 22,
          list: [
            { title: "不辣", id: 21 },
            { title: "微辣", id: 22 },
            { title: "中辣", id: 23 },
            { title: "特辣", id: 24 },
            { title: "变态辣", id: 25 },
          ],
        },
        {
          title: "规格",
          code: "",
          list: [
            { title: "加蛋", id: 31 },
            { title: "加葱", id: 32 },
          ],
        },
      ];
      this.sku = { ...this.details, ...{} };
      this.sku.number = this.details.number || 1;
      this.sku.sku_info = data;
      this.show_sku = true;
    },
    set_reduce(obj) {
      let data = {
        id: obj.id,
      };
      // 新增才有 obj 参数 购物车中数量少于1 做删除
      data.type = obj.number <= 1 ? "delete" : "reduce";

      obj.number--;
      this.set_change_food_shop_car(data);
    },
    set_add(obj) {
      if (!this.$validateStock(obj, obj.number)) {
        return uni.showToast({
          title: "库存不足，请重新选择",
          icon: "none",
        });
      }
      if (obj.sku) {
        return this.set_sku(obj);
      }
      let data = {
        obj,
        id: obj.id,
        number: 1, // 新增的情况下 为1 累加的是不 不使用这个
        type: "plus",
      };
      obj.number++;
      this.set_change_food_shop_car(data);
    },
    // sku 加入购物车
    set_food_sku(val) {
      let data = {
        obj: val,
        id: val.id,
        number: val.number,
        type: "plus",
      };
      this.details.number = val.number;
      this.set_change_food_shop_car(data);
      this.show_sku = false;
    },
    // 购买
    get_purchass() {
      uni.navigateTo({
        url: "/pages/purchase/index",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.show0-top {
  border-radius: 48rpx 48rpx 0 0;
}
</style>
